import { useUserStore } from '@/stores'
import { ref, markRaw, reactive } from 'vue'
import { setData } from 'el-plus-powerful-table-ts/es'
import type { PowerfulTableHeader } from 'el-plus-powerful-table-ts'
import { queryPartnerList } from '@/api/user'

export type Model = {
  orderNumber: string
  orderUuid: string
  orderType: string
  orderStatus: string
  flightNumber: string
  carUuid: string
  driverUuid: string
  startTime: number
  endTime: number
  brandUuid: string
  modelUuid: string
  seriesUuid: string
  remark: string
  createTime: number
  creatorName: string
  updateName: string
  updateTime: number
}

interface PowerfulTableData {
  list: Model[]
  header: any[]
  total: number
  listQuery: {
    pageNum: number
    pageSize: number
    orderNumber: string
    date: Array<string>
    orderSource: string
    useCarPartner: string
    // vin: string
    plateNumber: string
    serviceTime: Array<string>
    orderState: string
    orderType: string
    provinceCode: string
    cityCode: string
  }
}

export const defaultData = () => ({
  orderNumber: '',
  orderUuid: '',
  orderType: '',
  orderStatus: '',
  flightNumber: '',
  carUuid: '',
  driverUuid: '',
  startTime: 0,
  endTime: 0,
  brandUuid: '',
  route: '',
  departureAddress: '',
  destinationAddress: '',
  modelUuid: '',
  seriesUuid: '',
  createTime: 0,
  creatorName: '',
  updateName: '',
  updateTime: 0,
  orderTime: [],
  serviceStartTime: '',
  serviceEndTime: '',
  remark: '',
})

export const useData = <Row = any>() => {
  const userStore = useUserStore()
  console.log(userStore)
  const header: PowerfulTableHeader<Row>[] = [
    {
      label: '订单号', //显示的名称
      width: 180,
      headerAlign: 'left',
      props: [
        {
          prop: 'orderNumber',
        },
      ],
    },
    {
      label: '订单状态', //显示的名称
      headerAlign: 'left',
      width: 80,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'orderState',
        },
      ],
    },
    {
      label: '订单类型', //显示的名称
      headerAlign: 'left',
      width: 80,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'orderType',
        },
      ],
    },
    {
      label: '订单金额', //显示的名称
      headerAlign: 'left',
      width: 80,
      defaultShow: userStore.accountType == 1,
      props: [
        {
          prop: 'price',
        },
      ],
    },
    {
      label: '出发地-目的地', //显示的名称
      headerAlign: 'left',
      width: 180,
      overflowTooltip: true,
      property: {
        className: 'overflow-text',
      },
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'address',
        },
      ],
    },
    {
      label: '路线', //显示的名称
      headerAlign: 'left',
      width: 180,
      overflowTooltip: true,
      property: {
        className: 'overflow-text',
      },
      props: [
        {
          prop: 'route',
        },
      ],
    },
    {
      label: '司机', //显示的名称
      headerAlign: 'left',
      width: 120,
      overflowTooltip: true,
      property: {
        className: 'overflow-text',
      },
      props: [
        {
          prop: 'driverName',
        },
      ],
    },
    {
      label: '备注', //显示的名称
      headerAlign: 'left',
      width: 180,
      overflowTooltip: true,
      property: {
        className: 'overflow-text',
      },
      props: [
        {
          prop: 'remark',
        },
      ],
    },
    {
      label: '订单开始时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'serviceStartTimeStr',
        },
      ],
    },
    {
      label: '车架号（vin）', //显示的名称
      headerAlign: 'left',
      width: 170,
      props: [
        {
          prop: 'vin',
        },
      ],
    },
    {
      label: '车牌号', //显示的名称
      headerAlign: 'left',
      width: 120,
      overflowTooltip: true,
      property: {
        className: 'overflow-text',
      },
      props: [
        {
          prop: 'plateNumber',
        },
      ],
    },
    {
      label: '品牌', //显示的名称
      headerAlign: 'left',
      // width: 80,
      props: [
        {
          prop: 'brandName',
        },
      ],
    },
    {
      label: '车系', //显示的名称
      headerAlign: 'left',
      width: 80,
      props: [
        {
          prop: 'seriesName',
        },
      ],
    },
    {
      label: '车型', //显示的名称
      headerAlign: 'left',

      props: [
        {
          prop: 'modelName',
        },
      ],
    },
    {
      label: '订单来源', //显示的名称
      headerAlign: 'left',
      width: 120,
      overflowTooltip: true,
      property: {
        className: 'overflow-text',
      },
      props: [
        {
          prop: 'oderSourceName',
        },
      ],
    },

    {
      label: '车次号', //显示的名称
      headerAlign: 'left',
      width: 80,
      props: [
        {
          prop: 'trainNumber',
        },
      ],
    },
    {
      label: '航班号', //显示的名称
      headerAlign: 'left',
      width: 80,
      props: [
        {
          prop: 'flightNumber',
        },
      ],
    },
    {
      label: '订单结束时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'serviceEndTime',
        },
      ],
    },
    {
      label: '确认接单时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'confirmAcceptOrderTime',
        },
      ],
    },
    {
      label: '开始行程时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'startRouteTime',
        },
      ],
    },
    {
      label: '创建时间', //显示的名称
      headerAlign: 'left',
      width: 180,
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'createTime',
        },
      ],
    },
    {
      label: '创建人', //显示的名称
      headerAlign: 'left',
      width: 120,
      overflowTooltip: true,
      property: {
        className: 'overflow-text',
      },
      props: [
        {
          prop: 'creatorName',
        },
      ],
    },
    {
      label: '操作', //显示的标题
      fixed: 'right',
      headerAlign: 'left',
      minWidth: '120px',
      props: [
        {
          type: 'slot',
          prop: '',
          slotName: 'operation',
        },
      ],
    },
  ]
  const selectData = ref<any[]>([])
  // 编辑区显隐
  const isDialog = ref(false)
  const dispatchDialog = ref(false)
  // 弹窗开关
  const switchs = reactive({
    role: false,
    edit: false,
  })

  const orderSourceList = ref<any[]>([])

  const powerfulTableData: PowerfulTableData = reactive({
    list: [],
    header: header,
    total: 0,
    listQuery: {
      pageNum: 1,
      pageSize: 10,
      orderNumber: '',
      date: [],
      serviceTime: [],
      orderSource: '',
      plateNumber: '',
      useCarPartner: '',
      orderState: '',
      orderType: '',
      provinceCode: '',
      cityCode: '',
    },
  })

  queryPartnerList().then((res: any) => {
    orderSourceList.value = res.data
  })

  // row 数据
  const currentForm = ref<Model>(defaultData())

  // 品牌列表
  const listData = ref<{ label: string; value: string }[]>([])

  return {
    header,
    switchs,
    isDialog,
    dispatchDialog,
    powerfulTableData,
    orderSourceList,
    selectData,
    currentForm,
    listData,
  }
}
